<template>
  <rt-view>
    <rt-header></rt-header>
    <rt-content>
      <div class="rt-textarea-wrapper">
        <textarea
          ref="textarea"
          v-model="comment"
          class="textarea"
          :placeholder="commentHint"
          rows="3"
        />
      </div>
    </rt-content>
    <rt-footer>
      <rt-button-large text="发送" @click.native="SaveComment()">
        <rt-icon slot="icon" name="rt-xrm-submission" size="15"></rt-icon>
      </rt-button-large>
    </rt-footer>
  </rt-view>
</template>

<script>
export default {
  data() {
    return {
      comment: ''
    };
  },
  watch: {
    comment() {
      this.$nextTick(() => {
        this.computeHeight();
      });
    }
  },
  computed: {
    commentHint() {
      var nickName = this.$route.query.name;
      var name = this.$route.query.reply_comment_by_name;
      var parentId = this.$route.query.parent_id;
      if(!name&&parentId){
        return `回复 ${nickName} 的评论:`;
      }
      if(name) {
        return `回复 ${name} 的评论:`;
      }
      return "写评论";
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.textarea.focus();
      this.computeHeight();
    });
  },
  methods: {
    computeHeight() {
      let el = this.$refs.textarea;
      let originalHeight = el.style.height;
      el.style.height = 'auto';
      el.scrollTop = 0;
      el.style.height = el.scrollHeight + 'px';
    },
    SaveComment() {
      rt.showLoadingToast('评论上传中...');
      rt.post(`api/bbs/postcommentlog/create`, {
        parent_id: this.$route.query.parent_id,
        object_id: this.$route.query.object_id,
        object_name: this.$route.query.object_name,
        reply_comment_by_id: this.$route.query.reply_comment_by_id,
        reply_comment_by_name: this.$route.query.reply_comment_by_name,
        text: this.comment
      })
        .then(resp => {
          rt.hideLoadingToast();
          this.$router.back();
          this.$bus.$emit("reload-commentDatas");
        })
        .catch(error => {
          rt.hideLoadingToast();
          rt.showErrorToast(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.rt-textarea-wrapper {
  margin-top: 12px;
  position: relative;
  padding: 8px 10px;
  border-bottom: none;
  background: #fff;
  .textarea {
    font-family: -apple-system-font, 'Helvetica Neue', sans-serif;
    width: calc(~'(100% - 20px)');
    border: 0;
    outline: 0;
    resize: none;
    overflow: auto;
    background: #f4f5fa;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
    margin-top: 6px;
    padding: 10px;
  }
}
</style>
